<template>
    <ul v-for="item in arr">
        <li>姓名：{{ item.name }}</li>
        <li>年龄：{{ item.age }}</li>
    </ul>


    <table border="1">
        <thead>
            <tr style="background-color: cyan">
                <th>用户借款编号</th>
                <th>借款用户账号</th>
                <th>借款款项名称</th>
                <th>借款金额</th>
                <th>剩余还款本金</th>
            </tr>
        </thead>
        <tbody>
            <tr v-for="item in arr1">
                <td>{{ item.userid }}</td>
                <td>{{ item.username }}</td>
                <td>{{ item.pricename }}</td>
                <td>{{ item.jpriece }}</td>
                <td>{{ item.sprice }}</td>
            </tr>
        </tbody>
    </table>


<h1 v-html="title"></h1>
</template>

<script setup lang="ts">
//定义一个数组
const arr = [{
    name: '张大',
    age: 21
}, {
    name: '李尔',
    age: 20
}, {
    name: '刘珊',
    age: 22
}, {
    name: '钱嗣',
    age: 25
}, {
    name: '赵武',
    age: 24
}]
//定义一个数组
const arr1 = [{ userid: 1, username: 'zhangsan', pricename: '八维助学金', jpriece: 400, sprice: 0 },
{ userid: 2, username: 'zhangsan', pricename: '八维助学金', jpriece: 10000, sprice: 10000 },
]
//定义一个常量
const title='双向数据绑定演示'
</script>